<template>
	<view>
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar">  
		    <view class="top_view"></view>  
		</view>  
		<!-- #endif -->
		
		
		<view class="box">
			<image :src="loginbanner" class="sign-banner" alt=""></image>
			<image :src="loginlogo" class="sign-logo" alt=""></image>
			<view class="sign-box">
				<h3 style="height: 80rpx;">账号登录</h3>
				
				<view class="same-btn account">
					<label class="iconfont iconfonts icon-ym-people"></label>
					<input type="text" id="account" v-model="sign.account" placeholder="请输入帐号" />
				</view>
				<view class="same-btn password">
					<label class="iconfont iconfonts icon-ym-thecode"></label>
					<input type="text" id="password" v-model="sign.password" placeholder="请输入密码" :password="lookpwd?true:false" />
					<view class="iconfont eyes" :class="lookpwd?'icon-ym-hiding':'icon-ym-see'" @click="showHide"></view>
				</view>
				<view class="sign-btn" :load="load" @click="defaultLogin" hover-class="com-hover-btn">
					{{ load ? "登录中...":"登录"}}
				</view>
				
				
			</view>
			<view class="copyright">
				<text class="txt">Copyright © 2021 城市智慧停车平台</text>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	import graceChecker from '@/common/js/graceChecker.js'
	import config from '@/common/js/config.js'
	import helper from '@/common/js/helper.js'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	var rule = [{
		name: "account",
		checkType: "notnull",
		checkRule: "",
		errorMsg: "请输入账户"
	}, ]
	export default {
		data() {
			return {
				
				lookpwd: true,
				load: false,
				sign: {
					account: "",
					password: ""
				},
				loginbanner: config.Resources.banner.loginbanner,
				loginlogo: config.Resources.banner.loginlogo,
				Active: 'api',
				isUp: false,
				isShowAccount:true/* 是否显示账号开关 */
			}
		},
		onLoad() {
			/* 是否显示账号开关 */
			if(this.isShowAccount){
				this.sign.account = ''
				this.sign.password = ''
			}else{
				this.sign.account = ''
				this.sign.password = ''
			}
			
			
			uni.setStorageSync('apiKey', this.Active)
			 uni.setNavigationBarTitle({
			　　title:'城市智慧停车平台'
			})
			
			this.removeStorage();
		},
		
		mounted() {

		},
		onShow() {
			if (this.$store.state.wschat.socketState) {
				uni.closeSocket();
				this.$store.state.wschat.socketState = false;
			}
		},
		methods: {
			...mapMutations(['login']),
			defaultLogin() {
				// #ifdef APP-PLUS
				try {
					const apiKey = uni.getStorageSync('apiKey');
					if(apiKey){
						
					}
					const value = uni.getStorageSync(apiKey + '_cancellation');
					const account = uni.getStorageSync(config.Global.cache + '_Account');
					if (value == true && account == this.sign.account) {
						helper.msg("该账号已被注销。");
					} else {
						
				// #endif
				
				
						var checkRes = graceChecker.check(this.sign, rule);
						
						if (!graceChecker.check(this.sign, rule)) {
							helper.msg(graceChecker.error);
							return;
						}
						this.load = true;
						uni.showLoading({ //loading提示框
							title: '加载中...',
							mask: true
						});
						// #ifdef  APP-PLUS
						const clientid = plus.push.getClientInfo().clientid;
						
						// #endif
						let apiKey = this.Active;
						
						let baseUrlObj = config.Global.baseUrl;
						let baseUrl = config.Global.baseUrl[apiKey].apiUrl;
						uni.request({
							url: baseUrl + '/api/oauth/Login?client_id=admin&client_secret=123456&scope=all&grant_type=password',
							method: 'POST',
							header: {
								// #ifdef APP-PLUS
								clientId: clientid,
								// #endif
							},
							data: {
								account: this.sign.account,
								password: helper.calcuMD5(this.sign.password)
							},
							success: res => {
								uni.hideLoading();
								if (res.data.code == '200') {
									var _data = res.data.data;
									let login = {
										token: _data.token,
										account: this.sign.account
									}
									
								
									// #ifdef MP-ALIPAY
									uni.setStorage({
										key: config.Global.cache + '_Token',
										data: res.data.data.token
									});
									// #endif
									// #ifndef MP-ALIPAY
									uni.setStorage({
										key: config.Global.cache + '_Token',
										data: res.data.data.token
									});
									// #endif
									uni.setStorage({
										key: config.Global.cache + '_Account',
										data: this.sign.account
									});
									this.login(login)
									uni.switchTab({
										url: '/pages/index/index'
									});
								} else {
									helper.msg(res.data.msg);
									this.load = false;
								}
							},
							fail: (error) => {
								helper.msg(error.errMsg);
								this.load = false;
							},
							complete: () => {}
						});
						// #ifdef APP-PLUS
					}
				} catch (e) {}
				// #endif
			},
			tologin: function() {
				uni.redirectTo({
					url: '/pages/users/account/register-account/register-account'
				});
			},
			toforget: function() {
				uni.redirectTo({
					url: '/pages/users/account/modify-pwd/modify-pwd'
				});
			},
			showHide: function() {
				this.lookpwd = !this.lookpwd;
			},
			
			
			
			
			/* 清理缓存 */
			removeStorage(){
				uni.removeStorage({
					key: config.Global.cache + '_Token',
				});
				uni.removeStorage({
					key: config.Global.cache + '_UserProvider',
				});
				uni.removeStorage({
					key: config.Global.cache + '_ApplyMenu',
				});
				uni.removeStorage({
					key: config.Global.cache + '_appsoftware_key'
				});
				uni.removeStorage({
					key: config.Global.cache + '_FlowEngineList'
				});
				uni.removeStorage({
					key: config.Global.cache + '_DictionaryList'
				});
				uni.removeStorage({
					key: config.Global.cache + '_OrganizeList'
				});
				uni.removeStorage({
					key: config.Global.cache + '_RoleList'
				});
				uni.removeStorage({
					key: config.Global.cache + '_PositionList'
				});
				uni.removeStorage({
					key: config.Global.cache + '_UserList'
				});
				uni.removeStorage({
					key: 'featuresId'
				});
				uni.removeStorage({
					key: 'title'
				});
				uni.removeStorageSync("userList");
				uni.removeStorageSync("depList");
				uni.removeStorageSync("comList");
				uni.removeStorageSync("dicList");
				uni.removeStorageSync("posList");
				uni.removeStorageSync("F_Status");
				uni.removeStorageSync("F_FullName");
				uni.removeStorageSync("type");
				uni.removeStorageSync("formOperatesData");
				uni.removeStorageSync("transferId");
				uni.removeStorageSync("thisStepId");
				uni.removeStorageSync(config.Global.cache + '_Badge');
			}
			
		}
	}
</script>

<style lang="scss">
	/* #ifndef APP-PLUS */
	.status_bar {
	    height: var(--status-bar-height);  
	    width: 100%;  
	    background-color: #3281ff;  
	}  
	.top_view {  
	    height: var(--status-bar-height);  
	    width: 100%;  
	    position: fixed;  
	    background-color: #3281ff;  
	    top: 0;  
	    z-index: 999;  
	}
	/* #endif */
	
	
	#password {
		background: inherit;
		border: none;
		outline: none;
		width: inherit;
	}

	#account {
		background: inherit
	}

	.tabs {
		height: 80upx;
		margin: 30upx 0 60upx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		position: relative;

		&::after {
			position: absolute;
			left: 0;
			width: 50%;
			height: 2rpx;
			content: '';
			display: block;
			bottom: 0;
			background-color: #3281ff;
			z-index: 100;
			transition: .5s;
		}

		&.active1 {
			&::after {
				left: 0;
			}
		}

		&.active2 {
			&::after {
				left: 50%;
			}
		}

		.tab {
			width: 50%;
			height: 80upx;
			text-align: center;
			color: #AEAFB5;
			font-size: 32upx;
			border-bottom: 1upx solid #AEAFB5;

			&.active {
				color: #3281ff;
				// border-bottom: 1upx solid #3281ff;
			}
		}
	}
	.box{
		position: relative;
		
	}
	.copyright{
		color: #AEAFB5;
		width: 100%;
		position: absolute;
		bottom: 0;
		display: flex;
		flex-direction: row;
		justify-content: center;
		padding-bottom: 20rpx;
	}
</style>
